<template>
	<view class="comment-item" >
	  <image :style="{background:bgcolor}" src="" alt="用户头像" class="avatar">
	  <view class="comment-content">
	    <view class="comment-header">
	      <text class="comment-username">{{ creater.username }}</text>
	      <!-- <text class="like-count">♥ {{ comment.likeCount ||0 }}</text> -->
	    </view>
	    <p class="comment-text">{{ comment.content }}</p>
	    <view class="comment-footer">
	      <text class="comment-time">{{ comment.createTime }}</text>
	      <text class="reply-btn">回复</text>
	    </view>
	  </view>
	</view>
</template>

<script>
	import myquest from "@/untils/request.js"
	import colortool from "@/untils/colorTool.js"
	export default{
		name:"comment",
		props:{
			comment:{
				default:null,
				type:Object
			}
		},
		data(){
			return{
				creater:null,
				avatar:"",
				bgcolor:colortool.randomColor()
			}
		},
		mounted() {
			 myquest.getuserid(this.$store.state.token,this.$props.comment.createId)  //获取评论者
			  .then(r=>{
				  this.creater=r.data.data
			  })

		}
	}
</script>

<style>
	.comments-section {
	  padding: 0 15px;
	}
	
	.comment-item {
	  display: flex;
	  padding: 15px 0;
	  border-bottom: 1px solid #f0f0f0;
	}
	
	.comment-item .avatar {
	  width: 40px;
	  height: 40px;
	  border-radius: 50%;
	  margin-right: 12px;
	  flex-shrink: 0;
	  object-fit: cover;
	}
	
	.comment-content {
	  flex: 1;
	}
	
	.comment-header {
	  display: flex;
	  padding-right: 10px;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 8px;
	}
	
	.comment-username {
	  font-size: 15px;
	  font-weight: 500;
	}
	
	.like-count {
	  font-size: 14px;
	  color: #666;
	  display: flex;
	  align-items: center;
	}
	
	.comment-text {
	  font-size: 15px;
	  color: #333;
	  line-height: 1.5;
	  margin-bottom: 10px;
	}
	
	.comment-footer {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.comment-time {
	  font-size: 13px;
	  color: #999;
	}
	
	.reply-btn {
	  font-size: 14px;
	  color: #666;
	  padding: 3px 12px;
	}
</style>